<!DOCTYPE html>
<html lang="en">

<head>
	<base href="$$.RootPath$$">
	<title>$$.Book.Title$$ - Shiori - Bookmarks Manager</title>

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="apple-touch-icon-precomposed" sizes="152x152" href="assets/res/apple-touch-icon-152x152.png">
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/res/apple-touch-icon-144x144.png">
	<link rel="icon" type="image/png" href="assets/res/favicon-32x32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="assets/res/favicon-16x16.png" sizes="16x16">
	<link rel="icon" type="image/x-icon" href="assets/res/favicon.ico">
	<link rel="manifest" href="assets/manifest.webmanifest" />

	<link href="assets/css/style.css" rel="stylesheet">

	<script src="assets/js/vue.min.js"></script>
</head>

<body>
	<div id="content-scene">
		<div id="header">
			<p id="title" dir="auto">$$.Book.Title$$</p>
			<div class="links">
				<a href="$$.Book.URL$$" target="_blank" rel="noopener noreferrer">View Original</a>
				$$if .Book.HasArchive$$
				<a href="bookmark/$$.Book.ID$$/archive">View Archive</a>
				$$end$$
				$$if .Book.HasEbook$$
				<a href="bookmark/$$.Book.ID$$/ebook" download="$$.Book.Title$$.epub">Download Ebook</a>
				$$end$$
			</div>
		</div>
		<div id="content" dir="auto" v-pre>
			$$.HTML$$
		</div>
        <footer class="content-footer">
            <p class="metadata">{{ createdModifiedTime() }} </p>
        </footer>
	</div>

	<script type="module">
		// Create initial variable
		import basePage from "./assets/js/page/base.js";

		new Vue({
			el: '#content-scene',
			mixins: [basePage],
			data: {
				created: "$$.Book.CreatedAt$$"
			},
			methods: {
				createdModifiedTime() {
          const strCreatedTime = "$$.Book.CreatedAt$$".replace(" ", "T") + ("$$.Book.CreatedAt$$".endsWith("Z") ? "" : "Z");
          const strModifiedTime = "$$.Book.ModifiedAt$$".replace(" ", "T") + ("$$.Book.ModifiedAt$$".endsWith("Z") ? "" : "Z");

          const createdDate = new Date(strCreatedTime);
          const modifiedDate = new Date(strModifiedTime);

          if (createdDate.toDateString() === modifiedDate.toDateString()) {
            return `Added ${createdDate.getDate()} ${createdDate.toLocaleString('default', { month: 'long' })} ${createdDate.getFullYear()}`;
          } else {
            return `Added ${createdDate.getDate()} ${createdDate.toLocaleString('default', { month: 'long' })}  ${createdDate.getFullYear()}  | Last Modified ${modifiedDate.getDate()} ${modifiedDate.toLocaleString('default', {month: 'long'})} ${modifiedDate.getFullYear()}`;
        }
				},
				loadSetting() {
					var opts = JSON.parse(localStorage.getItem("shiori-account")) || {},
						ShowId = (typeof opts.config.ShowId === "boolean") ? opts.config.ShowId : false,
						ListMode = (typeof opts.config.ListMode === "boolean") ? opts.config.ListMode : false,
						Theme = (typeof opts.config.Theme === "string" && opts.config.Theme !== "") ? opts.config.Theme : "follow",
						UseArchive = (typeof opts.config.UseArchive === "boolean") ? opts.config.UseArchive : false,
						CreateEbook = (typeof opts.config.CreateEbook === "boolean") ? opts.config.CreateEbook : false;

					this.appOptions = {
						ShowId: ShowId,
						ListMode: ListMode,
						Theme: Theme,
						UseArchive: UseArchive,
						CreateEbook: CreateEbook,
					};
                    this.themeSwitch(Theme)
				}
			},
			mounted() {
				this.loadSetting();

				document.querySelectorAll("#content a").forEach(elem => {
					elem.setAttribute("target", "_blank");
					elem.setAttribute("rel", "noopener noreferrer");
				});
			}
		});
	</script>
</body>

</html>
